<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        /* ul li{
            color: red;
        }
        ul>div{
            color: rebeccapurple;
        }
        option{
            color: brown;
        }
        div, p {
            color: aqua;
        } */

        /* div {
            font-size: 100px;
        } */
        /*div:hover {
            color: blue;
        }
        div:active {
            color: blueviolet;
            font-size: 100px;
        } */

        /* div {
            /* font-family: '楷体'; 
            font-weight: 400;
            font-size: 100px;
            font-style: italic;
            color: rgb(0, 0, 0);
            text-decoration: line-through;

        } */
        /* .parent{
            background-color: red;
        }
        .child{
            background-color: rgba(255,255,255,0.5);
        } */
        /* a{
            text-decoration: none;
        } */
        /* p {
            text-indent: 2em;
            line-height: 50px;
            background-image: url(ziji.jpg);
        } */
        /* div {
            width: 100%;
            height: 100%;
            background-image: url(ziji.jpg);
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
        } */
        /* html, body {
            height: 100%;;
        } */
        /* div {
            width: 200px;
            height: 100px;
            background-color: rgb(128,0,0);
            border: 5px black dotted;
            box-sizing:  border-box;
            /* text-align: center;
            line-height: 100px; 
            padding: 40px;
        } */
        div {
            width: 100%;
            height: 150px;
            background-color: rgb(128,0,0);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        span {
            width: 100px;
            background-color: rgb(0,128,0);
            display: block;
        }
    </style> 
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <!-- <div>
        这是一段话
    </div> -->
    <!-- <p>
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
        这是一段话
    </p> -->
    <!-- <a href="#">这是一段话</a>
    <div>
        蔡徐坤
    </div> -->
    <!-- <div class="parent">
        <div class="child">
            这是一段话
        </div>
    </div> -->
    <!-- <div>周猷成</div> -->
    <!-- <style>
        /* div{
            color: red;
            font-size: 100px;
        }
        p{
            color: blue;
            font-size: 40px;
        } */
        .one{
            color: blue;
            font-size: 50px;
        }
        #the-id{
            color: rebeccapurple;
            font-size: 70px;
        }
    </style>
    <div style="color: green">css 你好</div>
    <div>css 你好</div>
    <div class="one">css 你好</div>
    <div>css 你好</div>
    <div>css 你好</div>
    <p id="the-id">html 你好</p>
    <p class="one">html 你好</p> -->
    <!-- <ul class="one">
        <li>
            <div>haha</div>
        </li>
        <li>haha</li>
        <li>haha</li>
    </ul>
    <ol>
        <li>lala</li>
        <li>lala</li>
        <li>lala</li>
    </ol> -->
    <!-- <select name="" id="">
        <option value="">zzzz</option>
        <option value="">xxxx</option>
        <option value="">cccc</option>
    </select> -->
</body>
</html>